﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPageVue.cshtml";
}

@this.Partial("Index-js")

<div id="app" class="topPanel">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$hits.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Edit"><i class="fa fa-pencil-square-o"></i>修改</button>
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>删除</button>
            <button class="btn btn-primary" v-on:click="Add"><i class="fa fa-plus"></i>添加</button>
        </div>

    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <input id="txt_keyword" type="text" class="form-control" placeholder="名称" style="width: 400px;" v-model="SearchModel.keyword">
                        <span class="input-group-btn">
                            <button id="btn_search" type="button" class="btn  btn-primary" v-on:click="Search"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>


<div id="table" class="table-responsive" v-cloak>
    <table class="table table-hover">
        <thead>
            <tr>
                <th style="width:20px;"></th>
                <th>名称</th>
                <th>编号</th>
                <th>负责人</th>
                <th>手机</th>
                <th>创建时间</th> 
                <th>备注</th> 
            </tr>
        </thead>

        <tbody>
            <tr v-for="(item,index) in Models" :class="{'warning':SelectedModel == item}" v-on:click="SelectRow(item)">
                <td>{{ GetOrdinal(index) }}</td>
                <td>{{ item.Name }}</td>
                <td>{{ item.EnCode }}</td>
                <td>{{ item.Manager }}</td>
                <td>{{ item.MobilePhone }}</td>
                <td>{{ DateString(item.CreationTime) }}</td>
                <td>{{ item.Description }}</td>
                
            </tr>
        </tbody>
        @this.Partial("_tfootVue")
    </table>
</div>


@this.Partial("_Modal")
<modal id="frmEdit" v-show="IsShow" v-on:close="IsShow = false" v-on:save="Save" v-cloak>
    <div slot="header">
        <h3>{{ Title }}</h3>
    </div>
    <div slot="body" class="modal-body">
        <form id="form1">
            <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
                <div style="padding-top: 20px; margin-right: 30px;">
                    <table class="form" v-cloak>
                        <tr>
                            <td class="formTitle">名称</td>
                            <td class="formValue">
                                <input id="Name" name="Name" type="text" class="form-control required" placeholder="请输入名称" v-model="Model.Name" />
                            </td>
                            <td class="formTitle">编号</td>
                            <td class="formValue">
                                <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入编号" v-model="Model.EnCode" />
                            </td>
                        </tr>
                        <tr>
                        <tr>
                            <td class="formTitle">负责人</td>
                            <td class="formValue">
                                <input id="Manager" name="Manager" type="text" class="form-control" v-model="Model.Manager" />
                            </td>
                            <td class="formTitle">手机</td>
                            <td class="formValue">
                                <input id="MobilePhone" name="MobilePhone" type="text" maxlength="11" class="form-control" v-model="Model.MobilePhone" />
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle">微信</td>
                            <td class="formValue">
                                <input id="WeChat" name="WeChat" type="text" class="form-control" v-model="Model.WeChat" />
                            </td>
                            <td class="formTitle">电话</td>
                            <td class="formValue">
                                <input id="Telephone" name="Telephone" type="text" class="form-control" v-model="Model.Telephone" />
                            </td>
                        </tr>
                        <tr>

                            <td class="formTitle">邮箱</td>
                            <td class="formValue">
                                <input id="Email" name="Email" type="text" class="form-control" v-model="Model.Email" />
                            </td>
                            <td class="formTitle">传真</td>
                            <td class="formValue">
                                <input id="Fax" name="Fax" type="text" class="form-control" v-model="Model.Fax" />
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle" valign="top" style="padding-top: 5px;">
                                备注
                            </td>
                            <td class="formValue" colspan="3">
                                <textarea id="Description" name="Description" class="form-control" style="height: 60px;" v-model="Model.Description"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</modal> 